<template>
	<div id="tmp1">
		<!-- <div class="inleft" @click="substrict"></div>
		<div class="incenter" v-text='count'></div>
		<div class="inright" @click="add"></div> -->
		<ul>
			<li class="inleft" @click="substrict">-</li>
			<li class="incenter" v-text='count'></li>
			<li class="inright" @click="add">+</li>
		</ul>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				count:1
			}
		},
		methods:{
			substrict(){
				this.count--;
				if(this.count<1){
					this.count = 1;
				}
				this.sendmessage();
			},
			add(){
				this.count++;
				this.sendmessage();
			},
			sendmessage(){
				this.$emit('dataobj',this.count);
			}
		}
	}
</script>
<style scoped>
	#tmp1{
		display: inline-block;
	}
	ul{
		display: inline-block;
	}

	ul li{
		width:60px;
		height: 20px;
		border:1px solid #666;
		list-style: none;
		float: left;
		text-align: center;
		margin-left:5px;
	}
	.inleft,.inright{
		width:30px;
		height: 20px;
	}
</style>
